<style scoped>
.line{
    height: 0px;
    border-bottom: 1px solid #ddd;
    margin-top: 15px;
    margin-bottom: 15px;
}
.pt20{
    padding-top: 20px;
}
.pb20{
    padding-bottom: 20px;
}
.pl20{
    padding-left: 20px;
}
.pr20{
    padding-right: 20px;
}
.pb180{
    padding-bottom: 180px;
}
.fixed-bottom{
    padding-top: 18px;
    height:80px;
    position:fixed; 
    left:210px;
    right:0; 
    bottom:0; 
    z-index: 999;
    text-align: center;
    background-color: rgb(255, 255, 255); 
    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.28);
}
.sidehide{
    left: 75px;
}
.clear{
    clear: both;
}
.head-icon{
    line-height: 58px;
    font-size: 16px;
    color: #ef8411;
    float: left;
    margin-right: 20px;
}
.iconclass{
    display: inline-block;
    width: 58px;
    background: #fff;
    border: 1px dashed #dddee1;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color .2s ease;
    height:58px;
    line-height: 58px;
}
.cropper-wrapper {
    margin-top: 10px;
	height: 400px;
}
.cropper-box{
    height: 300px;
}
.btn {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #c0ccda;
    color: #1f2d3d;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin:20px 10px 0px 0px;
    padding: 9px 15px;
    font-size: 14px;
    border-radius: 4px;
    color: #fff;
    background-color: #50bfff;
    border-color: #50bfff;
    transition: all .2s ease;
    text-decoration: none;
    user-select: none;
}
.headicon-tip{
    font-size: 12px;
    color: #000;
}








/*
*出单平台:王雷 2018/03/06
*/
.single{
    border: #000 1px solid;
}
.single .content{
    border: red 1px solid;
}
</style>
<style>
.amap-demo{
    height: 300px !important;
    margin-bottom:15px;
}
</style>

<template>
  <div class="wrap">
        <product-title></product-title>
        <div class="pl20 pr20">
            <Tabs type="card">
                <TabPane label="基本信息">
                    <Form :model="employeeDetail" ref="employeeDetail" :rules="ruleValidate">
                        <div class="head-icon">
                            头像上传
                        </div>
                        <Col :xs="24" :sm="24" :md="16" :lg="16"  >
                            <Form-item>
                                <div class="iconclass" @click="openModal('app_qr_code')">
                                    <Icon v-show="noapp" type="camera" size="20"></Icon>
                                    <img v-show="!noapp" :src="employeeDetail.avatar" width="58" height="58"/>
                                </div>
                                <p class="headicon-tip">(注：头像大小不能大于100k)</p>
                            </Form-item>                           
                        </Col>
                    
                    <div class="common-box-header clear">
                        <h3>员工信息</h3>
                    </div>
                    <div class="common-box-body pt20 pb20">
                        <Row>
                                <!-- <Col :xs="24" :sm="24" :md="6" :lg="6"  >
                                    <Form-item label="代理人工号：" prop="job_num" >
                                        <Input v-model="employeeDetail.job_num" placeholder="请输入员工编号"></Input>
                                    </Form-item>
                                </Col> -->
                                <Col :xs="24" :sm="24" :md="12" :lg="6"  >
                                    <Form-item label="姓名：" prop="name">
                                        <Input v-model="employeeDetail.name" placeholder="请输入姓名"></Input>
                                    </Form-item> 
                                </Col>                               
                                <Col :xs="24" :sm="24" :md="12" :lg="6">
                                    <FormItem prop="id_type" label="证件类型">
                                        <Select  placeholder="请选择证件类型" v-model="employeeDetail.id_type" :transfer=true >
                                            <Option value="身份证">身份证</Option>
                                            <Option value="户口本">户口本</Option>
                                            <Option value="护照">护照</Option>
                                            <Option value="军官证">军官证</Option>
                                            <Option value="港澳居民来往内地通行证">港澳居民来往内地通行证 </Option>
                                            <Option value="其他">其他</Option>
                                        </Select>  
                                    </FormItem>
                                </Col>
                                <Col :xs="24" :sm="24" :md="12" :lg="6"  >  
                                    <Form-item label="证件证号：" prop="id_number" >
                                        <Input v-model="employeeDetail.id_number" @on-change="idNumberChange($event)" placeholder="请输入身份证号"></Input>
                                    </Form-item> 
                                </Col>
                                <Col :xs="24" :sm="24" :md="12" :lg="6"  >
                                    <Form-item label="性别：" prop="sex">
                                        <Select v-model="employeeDetail.sex"  placeholder='请选择性别'>
                                            <Option value="0" >请选择</Option>
                                            <Option value="1" >男</Option>
                                            <Option value="2" >女</Option>
                                        </Select>
                                    </Form-item>
                                </Col>
                                <Col :xs="24" :sm="24" :md="12" :lg="12"  >  
                                    <FormItem label="出生日期：" prop="birthdaytime">                   
                                        <DatePicker type="date" @on-change="datachange($event,employeeDetail,'birthday')" placeholder="请选择生日" v-model="employeeDetail.birthdaytime"></DatePicker>                       
                                    </FormItem> 
                                </Col>
                                <Col :xs="24" :sm="24" :md="12" :lg="6">
                                    <FormItem  label="婚姻">
                                        <Select  placeholder="请选择婚姻状况" v-model="employeeDetail.marital" :transfer=true >
                                            <Option value="未婚">未婚</Option>
                                            <Option value="已婚">已婚</Option>
                                            <Option value="丧偶">丧偶</Option>
                                            <Option value="离异">离异</Option>                                              
                                        </Select>  
                                    </FormItem>
                                </Col>
                                <Col :xs="24" :sm="24" :md="12" :lg="6">
                                    <FormItem label="文化程度">
                                        <Select  placeholder="请选择" v-model="employeeDetail.education" :transfer=true >
                                            <Option value="小学">小学</Option>
                                            <Option value="初中">初中</Option> 
                                            <Option value="高中">高中</Option>
                                            <Option value="中专">中专</Option>
                                            <Option value="大专">大专</Option>
                                            <Option value="本科">本科</Option>
                                            <Option value="研究生及以上">研究生及以上</Option>                                            
                                        </Select>  
                                    </FormItem>
                                </Col>
                                <Col :xs="24" :sm="24" :md="12" :lg="6">
                                    <FormItem  label="民族">
                                        <Select  placeholder="请选择民族" v-model="employeeDetail.nation" :transfer=true >
                                            <Option v-for="item in national" :value="item" :key="item">{{item}}</Option>
                                                                                    
                                        </Select>  
                                    </FormItem>
                                </Col>                               
                                <Col :xs="24" :sm="24" :md="12" :lg="6">
                                    <FormItem  label="星座">
                                        <Select  placeholder="请选择星座" v-model="employeeDetail.star_signs" :transfer=true >
                                            <Option value="双子座">双子座</Option>
                                            <Option value="天秤座">天秤座</Option>
                                            <Option value="白羊座">白羊座</Option>
                                            <Option value="金牛座">金牛座</Option>
                                            <Option value="巨蟹座">巨蟹座</Option>
                                            <Option value="狮子座">狮子座</Option>
                                            <Option value="处女座">处女座</Option>
                                            <Option value="天蝎座">天蝎座</Option>
                                            <Option value="射手座">射手座</Option>
                                            <Option value="摩羯座">摩羯座</Option>
                                            <Option value="水瓶座">水瓶座</Option>
                                            <Option value="双鱼座">双鱼座</Option>                                                                                      
                                        </Select>  
                                    </FormItem>
                                </Col> 
                                <Col :xs="24" :sm="24" :md="12" :lg="6">
                                    <FormItem  label="血型">
                                        <Select  placeholder="请选择血型" v-model="employeeDetail.blood" :transfer=true >
                                            <Option value="O型">O型</Option>
                                            <Option value="A型">A型</Option>
                                            <Option value="B型">B型</Option>
                                            <Option value="AB型">AB型</Option>                                                                                             
                                        </Select>  
                                    </FormItem>
                                </Col> 
                                <Col :xs="24" :sm="24" :md="12" :lg="6">
                                    <FormItem  label="籍贯">
                                        <Select  placeholder="请选择籍贯" v-model="employeeDetail.origin" :transfer=true >
                                            <Option value ="请选择市区">请选择省份</Option>
                                            <Option value ="北京市">北京市</Option>
                                            <Option value ="天津市">天津市</Option>
                                            <Option value ="上海市">上海市</Option>
                                            <Option value ="重庆市">重庆市</Option>
                                            <Option value ="河北省">河北省</Option>
                                            <Option value ="山西省">山西省</Option>
                                            <Option value ="辽宁省">辽宁省</Option>
                                            <Option value ="吉林省">吉林省</Option>
                                            <Option value ="黑龙江省">黑龙江省</Option>
                                            <Option value ="江苏省">江苏省</Option>
                                            <Option value ="浙江省">浙江省</Option>
                                            <Option value ="安徽省">安徽省</Option>
                                            <Option value ="福建省">福建省</Option>
                                            <Option value ="江西省">江西省</Option>
                                            <Option value ="山东省">山东省</Option>
                                            <Option value ="河南省">河南省</Option>
                                            <Option value ="湖北省">湖北省</Option>
                                            <Option value ="湖南省">湖南省</Option>
                                            <Option value ="广东省">广东省</Option>
                                            <Option value ="海南省">海南省</Option>
                                            <Option value ="四川省">四川省</Option>
                                            <Option value ="贵州省">贵州省</Option>
                                            <Option value ="云南省">云南省</Option>
                                            <Option value ="陕西省">陕西省</Option>
                                            <Option value ="甘肃省">甘肃省</Option>
                                            <Option value ="青海省">青海省</Option>
                                            <Option value ="台湾省">台湾省</Option>
                                            <Option value ="广西壮族自治区">广西壮族自治区</Option>
                                            <Option value ="内蒙古自治区">内蒙古自治区</Option>
                                            <Option value ="西藏自治区">西藏自治区</Option>
                                            <Option value ="宁夏回族自治区">宁夏回族自治区</Option>
                                            <Option value ="新疆维吾尔自治区">新疆维吾尔自治区</Option>
                                            <Option value ="香港特别行政区">香港特别行政区</Option>
                                            <Option value ="澳门特别行政区">澳门特别行政区</Option>                                                                                            
                                        </Select>  
                                    </FormItem>
                                </Col>                                                                                                                                      
                        </Row>
                    </div>
                    <div class="common-box-header">
                        <h3>联系方式</h3>
                    </div>
                    <div class="common-box-body pt20 pb20">
                        <Row>
                            <Col  :xs="24" :sm="24" :md="12" :lg="6">
                                <Form-item prop="mobile" label="手机号">
                                    <Input v-model="employeeDetail.mobile" placeholder="请输入手机号"></Input>
                                </Form-item> 
                            </Col>                               
                            <Col  :xs="24" :sm="24" :md="12" :lg="6">
                                <Form-item label="座机">
                                    <Input v-model="employeeDetail.tel" placeholder="请输入座机"></Input>
                                </Form-item> 
                            </Col>
                            <Col :xs="24" :sm="24" :md="12" :lg="6">
                                <Form-item label="邮箱" prop="email">
                                    <Input v-model="employeeDetail.email" placeholder="请输入邮箱"></Input>
                                </Form-item>
                            </Col>                                
                            <Col :xs="24" :sm="24" :md="12" :lg="6">
                                <Form-item label="QQ">
                                    <Input v-model="employeeDetail.qq" placeholder="请输入QQ"></Input>
                                </Form-item>
                            </Col>
                            <Col :xs="24" :sm="24" :md="12" :lg="6">
                                <Form-item label="微信">
                                    <Input v-model="employeeDetail.wechat" placeholder="请输入微信"></Input>
                                </Form-item>
                            </Col>
                            <Col :xs="24" :sm="24" :md="12" :lg="6">
                                <Form-item label="邮编" prop="postcode">
                                    <Input v-model="employeeDetail.postcode" placeholder="请输入邮编"></Input>
                                </Form-item>
                            </Col>  
                            <Col :xs="24" :sm="24" :md="12" :lg="12">
                                <Form-item label="省市区">
                                    <!-- <Input v-model="employeeDetail.area_id" placeholder="请选择省市区"></Input> -->
                                    <Cascader :data="area_data" @on-change="areaChange" v-model="employeeDetail.area_idarry"></Cascader>
                                </Form-item>
                            </Col> 
                            <Col :xs="24" :sm="24" :md="12" :lg="12">
                                <Form-item label="详细地址">
                                    <Input v-model="employeeDetail.address" @on-change="addressChange($event)" placeholder="请填写详细地址"></Input>
                                </Form-item>
                            </Col>
                            <Col :xs="24" :sm="24" :md="12" :lg="12">
                                <Form-item label="经纬度">
                                    <Input v-model="lng_lat" disabled placeholder="点击地图自动生成"></Input>
                                </Form-item>
                            </Col>                                 
                            <Col :xs="24" :sm="24" :md="14" :lg="14">
                                <Form-item>
                                    <el-amap vid="amapDemo" class="amap-demo" :plugin="plugins" :center="mapCenter" style="padding:10px;border: 1px solid #EDEDED">
                                    </el-amap>
                                </Form-item>
                            </Col>  
                        </Row>
                    </div>
                    <div class="common-box-header">
                        <h3>当前职级</h3>
                    </div>
                    <div class="common-box-body pt20 pb20">
                        <Row>
                            <Col :xs="24" :sm="24" :md="12" :lg="6">
                                <Form-item label="工号">
                                    <Input v-model="employeeDetail.job_code" placeholder="请输入工号"></Input>
                                </Form-item>
                            </Col>                                
                            <Col :xs="24" :sm="24" :md="12" :lg="6">
                                <FormItem prop="yun_org_mid" label="分支机构">
                                    <!-- <Select  placeholder="请选择" v-model="employeeDetail.oid" :transfer=true placement="top">                                                                                           
                                    </Select>  -->
                                    <!-- <Select filterable remote :remote-method="oidremote" :loading="remoteloading" placeholder="请选择" v-model="employeeDetail.yun_org_mid" :transfer=true>
                                        <Option v-for="item in orglist" :value="item.value">{{item.label}}</Option>                                                                                                                                       
                                    </Select>    -->
                                    <Select ref="orgselect"   filterable  placeholder="请输入分支机构" v-model="employeeDetail.yun_org_mid" :transfer=true>
                                        <Option v-for="item in orglist" :value="item.id" :key="item.id">{{item.shortn}}</Option>                                                                                                                                       
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col :xs="24" :sm="24" :md="12" :lg="6">
                                <FormItem prop="dept_id" label="所属部门">
                                    <Select  placeholder="请选择" v-model="employeeDetail.dept_id" :transfer=true placement="top">
                                        <Option v-for="(value,key) in deptlist" :value="key" :key="key">{{value}}</Option>                                                                                               
                                    </Select>  
                                </FormItem>
                            </Col>
                            <Col :xs="24" :sm="24" :md="12" :lg="6">
                                <FormItem prop="service_type" label="勤务类型">
                                    <Select  placeholder="请选择" v-model="employeeDetail.service_type" :transfer=true placement="top">
                                        <Option value="内勤">内勤</Option>
                                        <Option value="外勤">外勤</Option>                                                                                           
                                    </Select>  
                                </FormItem>
                            </Col>
                            <Col :xs="24" :sm="24" :md="12" :lg="6">
                                <FormItem label="当前职级">
                                    <Select  placeholder="请选择" v-model="employeeDetail.rank_id" :transfer=true placement="top">
                                        <Option v-for="(value,key) in ranklist" :value="key" :key="key">{{value}}</Option>                                                                                                                                        
                                    </Select>  
                                </FormItem>
                            </Col>
                            <Col :xs="24" :sm="24" :md="12" :lg="6">
                                <FormItem label="推荐人">
                                    <Select filterable remote label-in-value @on-change="selectLabelInValue($event,employeeDetail,'rec_name')" :remote-method="employeeremote" :loading="remoteloading" placeholder="请选择" v-model="employeeDetail.rec_id" :transfer=true>
                                        <Option v-for="item in employee1" :value="item.value" :key="item.value">{{item.label}}</Option>                                                                                                                                       
                                    </Select>  
                                </FormItem>
                            </Col>
                            <!-- <Col :xs="24" :sm="24" :md="6" :lg="6">
                                <FormItem prop="cardName" label="职级生效">
                                    <Select  placeholder="请选择职级生效" v-model="employeeDetail.cardName" :transfer=true placement="top">
                                        <Option value="是">是</Option>
                                        <Option value="否">否</Option>                                                                                                                                     
                                    </Select>  
                                </FormItem>
                            </Col> -->
                            <Col :xs="24" :sm="24" :md="12" :lg="6">
                                <FormItem label="关系上属">
                                    <Select filterable remote label-in-value @on-change="selectLabelInValue($event,employeeDetail,'leader_name')" :remote-method="employeeremote2" :loading="remoteloading" placeholder="请选择" v-model="employeeDetail.leader_id" :transfer=true>
                                        <Option v-for="item in employee2" :value="item.value" :key="item.value">{{item.label}}</Option>                                                                                                                                     
                                    </Select>  
                                </FormItem>
                            </Col>
                            <Col :xs="24" :sm="24" :md="12" :lg="6">
                                <FormItem label="行政主管">
                                    <Select filterable remote label-in-value @on-change="selectLabelInValue($event,employeeDetail,'admin_name')" :remote-method="employeeremote3" :loading="remoteloading" placeholder="请选择" v-model="employeeDetail.admin_id" :transfer=true>
                                        <Option v-for="item in employee3" :value="item.value" :key="item.value">{{item.label}}</Option>                                                                                                                                     
                                    </Select>  
                                </FormItem>
                            </Col>
                            <Col :xs="24" :sm="24" :md="12" :lg="6">
                                <FormItem  label="入司时间" prop="join_timetime">
                                    <DatePicker type="date" @on-change="datachange($event,employeeDetail,'join_time')" placeholder="请选择" v-model="employeeDetail.join_timetime"></DatePicker>                     
                                </FormItem>
                            </Col>
                            <Col :xs="24" :sm="24" :md="12" :lg="6">
                                <FormItem  label="晋升时间">
                                    <DatePicker type="date" @on-change="datachange($event,employeeDetail,'promotion_time')" placeholder="请选择" v-model="employeeDetail.promotion_timetime"></DatePicker>                     
                                </FormItem>
                            </Col>
                            <Col :xs="24" :sm="24" :md="12" :lg="6">
                                <FormItem label="在职状态">
                                    <Select  placeholder="请选择" v-model="employeeDetail.status" :transfer=true placement="top">
                                        <Option value="1">在职</Option>
                                        <Option value="2">离职</Option>
                                        <Option value="3">留职</Option>                                                                                                                                     
                                    </Select>  
                                </FormItem>
                            </Col> 
                            <Col :xs="24" :sm="24" :md="12" :lg="6">
                                <Form-item label="合同号码">
                                    <Input v-model="employeeDetail.contract_no" placeholder="请输入合同号码"></Input>
                                </Form-item>
                            </Col> 
                            <Col :xs="24" :sm="24" :md="12" :lg="12">
                                <Form-item label="合同期间（起止）">
                                    <DatePicker :value="employeeDetail.value2" @on-change="contractchange" transfer format="yyyy-MM-dd" type="daterange" placement="bottom-end" placeholder="请选择合同期间"></DatePicker>
                                </Form-item>
                            </Col>                            
                        </Row>
                    </div>
                    <div class="common-box-header">
                        <h3>紧急联系人</h3>
                    </div>
                    <div class="common-box-body pt20 pb20">
                        <Row>                            
                            <Col :xs="24" :sm="24" :md="12" :lg="6">
                                <Form-item label="姓名">
                                        <Input v-model="employeeDetail.emergent_name" placeholder="请输入姓名"></Input>
                                </Form-item>
                            </Col>
                            <Col :xs="24" :sm="24" :md="12" :lg="6">
                                <Form-item label="手机号码" prop="emergent_mobile">
                                        <Input v-model="employeeDetail.emergent_mobile" placeholder="请输入手机号码"></Input>
                                </Form-item>
                            </Col>
                            <Col :xs="24" :sm="24" :md="12" :lg="12">                               
                                <Form-item label="详细地址">
                                        <Input v-model="employeeDetail.emergent_address" placeholder="请输入详细地址"></Input>
                                </Form-item>
                            </Col>                           
                        </Row>
                    </div>
                    </Form>                                                                                                                               
                </TabPane>
            </Tabs>              
                        
        </div>
        <div :class="slidetoggle?'fixed-bottom':'fixed-bottom sidehide' ">
            <Button type="primary" @click="sendemployee" shape="circle" icon="icon iconfont icon-dui">保存/提交</Button>
            <Button type="ghost" @click="cancel" class="ml20" shape="circle" icon="icon iconfont icon-tableresetpassword">返回</Button>
        </div>
        <Modal v-model="modal2" width="1200" ok-text="上传图片" :loading="loading" @on-ok="uploadHeadimg">
            <Row class="cropper-wrapper">
                <Col span="11" class="cropper-box">
                    <vueCropper
                        ref="cropper"
                        :img="headImg.img"
                        :outputSize="headImg.size"
                        :outputType="headImg.outputType"
                        :info="headImg.info"
                        :canScale="headImg.canScale"
                        :autoCrop="headImg.autoCrop"
                        :autoCropWidth="headImg.width"
                        :autoCropHeight="headImg.height"
                        :fixed="headImg.fixed"
                        :fixedNumber="headImg.fixedNumber"
                        @realTime="realTime"
                    ></vueCropper>
                    <label class="btn" for="upload2">打开图片</label>
                    <input type="file" id="upload2" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event)">
                    <!-- <button @click="finish2('base64')" class="btn">裁剪</button> -->
                </Col>
                <Col span="7" offset="1">
                    <!-- <img :src="formItem.headImg.demoimg" /> -->
                    <div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden', 'margin': '5px'}">
                        <div :style="previews.div">
                            <img :src="headImg.img" :style="previews.img">
                        </div>
                    </div>
                </Col>
            </Row>                           
        </Modal> 
        <Spin size="large" fix v-if="spinShow"></Spin> 
  </div>
</template>
<script>
import productTitle from '../../components/productTitle'
import city from '../../asset/js/city';
import VueCropper from 'vue-cropper';
import debounce  from 'lodash.debounce'
import { lazyAMapApiLoaderInstance  } from 'vue-amap';
import { employeeCreate ,   getById , getByName } from '../../api/employee'
import { userGetByName } from '../../api/user'
import { getYunRankList } from '../../api/rank'
import { getDeptList } from '../../api/yun_dept'  
import { getListByName } from '../../api/yun_org' 
import { getStsTokenWrite,getStsTokenRead } from '../../api/common';
import  util  from '../../libs/util'
export default {
    data () {        
        return {
            spinShow:false,
            plugins: ['Geolocation','PlaceSearch'],
            mapCenter:[113.63305, 34.767174],
            markers:[],
            map:{},
            area_data: city,
            noapp:true,
            national : [
            "汉族", "壮族", "满族", "回族", "苗族", "维吾尔族", "土家族", "彝族", "蒙古族", "藏族", "布依族", "侗族", "瑶族", "朝鲜族", "白族", "哈尼族",
            "哈萨克族", "黎族", "傣族", "畲族", "傈僳族", "仡佬族", "东乡族", "高山族", "拉祜族", "水族", "佤族", "纳西族", "羌族", "土族", "仫佬族", "锡伯族",
            "柯尔克孜族", "达斡尔族", "景颇族", "毛南族", "撒拉族", "布朗族", "塔吉克族", "阿昌族", "普米族", "鄂温克族", "怒族", "京族", "基诺族", "德昂族", "保安族",
            "俄罗斯族", "裕固族", "乌孜别克族", "门巴族", "鄂伦春族", "独龙族", "塔塔尔族", "赫哲族", "珞巴族"
            ],
            employeeDetail: {
                avatar:'',
                name: '',
                yun_org_mid:'',
                rank: '',
                dept:'',
                role:'',
                birthday:'',
                birthdaytime:'',
                join_time:'',
                promotion_time:'',
                mobile:'',
                id_type:'身份证',
                id_number:'',
                sex:'',
                nation:'汉族',
                rec_id:'',               
                lng:'',
                lat:'',
                address:'',
                contract_start:'',
                contract_end:'',
                value2: ['', '']
            },
            ranklist:{},
            deptlist:{},
            loading: true,
            remoteloading:false,
            headImg: {
                    img: '',
                    info: true,
                    size: 1,
                    canScale:true,
                    outputType: 'jpeg',
                    autoCrop: true,
                    // 只有自动截图开启 宽度高度才生效
                    autoCropWidth: 200,
                    autoCropHeight: 200,
                    // 开启宽度和高度比例
                    fixed: true,
                    fixedNumber: [1, 1],
                    demoimg:'',

            },
            modal2: false,
            previews: {},
            rankList: [
    
            ],
            roleList:[

            ],
            deptList:[

            ],
            orglist:[],
            employeeList:[

            ],
            employee1:[],
            employee2:[],
            employee3:[],
            ruleValidate: {
                name: [
                    { required: true, message: '姓名不能为空', trigger: 'blur' }
                ],
                sex: [
                    { required: true, message: '员工性别不能为空', trigger: 'change' },
                ],
                id_type: [
                    { required: true, message: '证件类型不能为空', trigger: 'change' },
                ],
                id_number:[
                    { required: true, message: '证件号码不能为空', trigger: 'blur' },
                ],
                birthdaytime:[
                    { required: true, type:'date', message: '出生日期不能为空', trigger: 'change' },
                ],
                mobile: [
                    { required: true, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请填写手机号', trigger: 'blur' }
                ],
                emergent_mobile:[
                     { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请填写手机号', trigger: 'blur' }
                ],
                email: [
                    { type:'email', message: '请正确填写email', trigger: 'change' }
                ],
                postcode:[
                    { pattern: /^[0-9]{6}$/, message: '请正确填写邮编', trigger: 'change' }
                ],
                yun_org_mid:[
                   {  message: '请输入分支机构', trigger: 'change' }, 
                ],
                dept_id:[
                   { required: true,  message: '请输入所属部门', trigger: 'change' }, 
                ],
                service_type:[
                    { required: true,  message: '请选择勤务类型', trigger: 'change' }, 
                ],
                join_timetime:[
                    { required: true, type:'date', message: '入司日期不能为空', trigger: 'change' },
                ],
//                job_num: [
//                    { required: true, message: '员工编号不能为空', trigger: 'blur' },
//                ],
            },
        }
    },
    components: {
        productTitle,
        VueCropper,
    },
    computed: {
        slidetoggle(){
            return this.$store.state.sildeshow
        },
        lng_lat(){
            if(this.employeeDetail.lng&&this.employeeDetail.lat){
                return this.employeeDetail.lng+','+this.employeeDetail.lat
            }else{
                return ''
            }
            
        }
    },
    created () {
        
    },
    watch: {
        '$route' (to, from) {
      // 对路由变化作出响应...
        
        }
    },
    mounted () {
        lazyAMapApiLoaderInstance.load().then(() => {
            this.map = new AMap.Map('amapDemo', {
                center:this.mapCenter,
                zoom:15
            });
            var _self = this
            this.map.on("click",function(event){
                _self.employeeDetail.lng = event.lnglat.lng;
                _self.employeeDetail.lat = event.lnglat.lat;
                if(_self.employeeDetail.lng&_self.employeeDetail.lat){
                    _self.map.remove(_self.markers)
                    var marker = new AMap.Marker({
                        map: _self.map,
                        position: [event.lnglat.lng, event.lnglat.lat]
                    });
                    _self.markers.push(marker)
                }               
            })
//
        });
         this.getRank()
         this.getDept()
         this.orglistinit()
    },
    methods: {
        orglistinit(){
            new Promise((resolve, reject) => {
            let _params = {
                name:''
            }
            getListByName(_params).then(response => {
                    console.log(response.data)
                    if (response.data.err == 0) {               
                        this.orglist = response.data.data;
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        selectLabelInValue(item,obj,name){
            if(item.label){
                obj[name] = item.label
            }            
        },
        oidremote(query){
            if (query !== '') {
                
                this.remoteloading = true;
                this.remoteorg(query)               
            } else {
                this.orglist = [];
            }
        },
        remoteorg:debounce(function (query) { 
            this.remoteloading = false;
            new Promise((resolve, reject) => {
            let _params = {
                name:query
            }
            getListByName(_params).then(response => {
                    console.log(response.data)
                    if (response.data.err == 0) {
                        // this.emplist = response.data.data                       
                        const list = response.data.data.map(item => {
                        return {
                                value: item.id,
                                label: item.shortn
                            };
                        });
                        this.orglist = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },300),
        employeeremote(query) {
            if (query !== '') {
                console.log(query)
                console.log(this.employeeDetail.rec_name)
                if(query == this.employeeDetail.rec_name){
                    this.employeeDetail.rec_id = ''
                    this.employeeDetail.rec_name = ''
                    return
                }
                this.remoteloading = true;
                this.remoteemp(query)               
            } else {
                this.employee1 = [];
            }
        },
        remoteemp:debounce(function (query) { 
            this.remoteloading = false;
            new Promise((resolve, reject) => {
            let _params = {
                name:query
            }
            getByName(_params).then(response => {
                    console.log(response.data)
                    if (response.data.err == 0) {
                        // this.emplist = response.data.data                       
                        const list = response.data.data.map(item => {
                        return {
                                value: item.id,
                                label: item.name+'('+item.job_code+')'
                            };
                        });
                        this.employee1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },300),
        employeeremote2(query) {
            if (query !== '') {
                if(query == this.employeeDetail.leader_name){
                    this.employeeDetail.leader_id = ''
                    this.employeeDetail.leader_name = ''
                    return
                }
                this.remoteloading = true;
                this.remoteemp2(query)               
            } else {
                this.employee2 = [];
            }
        },
        remoteemp2:debounce(function (query) { 
            this.remoteloading = false;
            new Promise((resolve, reject) => {
            let _params = {
                name:query
            }
            getByName(_params).then(response => {
                    console.log(response.data)
                    if (response.data.err == 0) {
                        // this.emplist = response.data.data                       
                        const list = response.data.data.map(item => {
                        return {
                                value: item.id,
                                label: item.name+'('+item.job_code+')'
                            };
                        });
                        this.employee2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },300),
        employeeremote3(query) {
            if (query !== '') {
                if(query == this.employeeDetail.admin_name){
                    this.employeeDetail.admin_id = ''
                    this.employeeDetail.admin_name = ''
                    return
                }
                this.remoteloading = true;
                this.remoteemp3(query)               
            } else {
                this.employee3 = [];
            }
        },
        remoteemp3:debounce(function (query) { 
            this.remoteloading = false;
            new Promise((resolve, reject) => {
            let _params = {
                name:query
            }
            getByName(_params).then(response => {
                    console.log(response.data)
                    if (response.data.err == 0) {
                        // this.emplist = response.data.data                       
                        const list = response.data.data.map(item => {
                        return {
                                value: item.id,
                                label: item.name+'('+item.job_code+')'
                            };
                        });
                        this.employee3 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },300),
        getDept(){          
            new Promise((resolve,reject)=>{
                getDeptList().then(response => {
                    console.log(response)
                    if(response.data.err == 0){
                        this.deptlist = Object.assign({},response.data.data)
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            })
        },
        getRank(){           
            new Promise((resolve,reject)=>{
                getYunRankList().then(response => {
                    console.log(response)
                    if(response.data.err == 0){
                        this.ranklist = Object.assign({},response.data.data)
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            })
        },
        //头像
        openModal(){
            this.modal2 = true  
            if(this.employeeDetail.avatar){
                this.headImg.img = this.employeeDetail.avatar
            }else{
                this.headImg.img = ''
            }
        },
        //起止时间
        contractchange(value){
            console.log(value)
            this.employeeDetail.contract_start = value[0]
            this.employeeDetail.contract_end = value[1]
        },
        //地区切换
        areaChange(value,selectedData){
            console.log(value)
            console.log(selectedData)
            this.employeeDetail.area_id = value[0]+'-'+value[1]+'-'+value[2]
        },
        //时间转换
        datachange(date,obj,param){
            obj[param] = date
        },
        idNumberChange(event){
            let _length = this.employeeDetail.id_number.length
            if( _length == 18){
                this.employeeDetail.birthdaytime = util.GetBirthday(this.employeeDetail.id_number)
                this.employeeDetail.birthday = util.GetBirthday(this.employeeDetail.id_number)
                var _sex = util.Getsex(this.employeeDetail.id_number)+''
                this.$set(this.employeeDetail,'sex',_sex)
            }
        },
        uploadImg (e) {
            //上传图片
            // this.option.img        
            this.files={};
            var file = e.target.files[0];
            this.files = file;
            if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
                alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
                return false
            }
            var reader = new FileReader()
            reader.onload = (e) => {
                this.headImg.img = e.target.result
            }
            reader.readAsDataURL(file);
        },
        // 实时预览函数
        realTime (data) {
            this.previews = data
        },
        toBlob(urlData,fileType){
            var bytes=window.atob(urlData),
                n=bytes.length,
                u8arr=new Uint8Array(n);
            while(n--){
                u8arr[n]=bytes.charCodeAt(n);
            }
            return new Blob([u8arr],{type:fileType});
        },
        uploadHeadimg () {
            this.$refs.cropper.getCropData((data) => {               
                    //this.customer.avator = data
                    //this.formItem.logo = data
                getStsTokenWrite().then((res)=>{
                    if(res.data.err==0){
                        var sts = res.data.data.Credentials;
                        var client = new OSS.Wrapper({
                            region:'oss-cn-hangzhou',
                            accessKeyId: sts.AccessKeyId,
                            accessKeySecret: sts.AccessKeySecret,
                            stsToken: sts.SecurityToken,
                            bucket: 'kuaibao-imgs',
                            secure: true,
                        });
                        var base64 = data.split(',')[1];
                        var fileType = data.split(';')[0].split(':')[1];
                                
                        // base64转blob
                        var blob = this.toBlob(base64,fileType);
                        // blob转arrayBuffer
                        var reader = new FileReader();
                        reader.readAsArrayBuffer(blob);
                        let files = this.files;
                        let size=files.size;
                        let _this = this
                        reader.onload = function (event) {
                            var buffer = new OSS.Buffer(event.target.result);
                            //这里用 multipartUpload  上传会报错，所以更改为 put
                            client.put(files.name, buffer).then((results) => {
                                console.log(results)
                                if(results.url){
                                        _this.$set(_this.employeeDetail,"avatar",results.url)
                                        _this.noapp = false
                                }else{
                                    _this.$Message.error('上传出错');
                                }
                            })
                        }                  
                    }
                })                                               
            })
            
            this.modal2 = false;
            
        },
        addressChange:debounce(function (param) { 
            var _address =   this.employeeDetail.address;
            this.onSearchResult(_address)
         },300),                                         
        onSearchResult(address) {
            var map = this.map
            var local = new AMap.PlaceSearch({
                map: map
            });
            local.search(address,function(status,result){
            });
            this.map.remove(this.markers)
            var _self = this
            local.on("markerClick",function(event){
                _self.employeeDetail.lng = event.data.location.lng;
                _self.employeeDetail.lat = event.data.location.lat;
                _self.map.remove(_self.markers)
            })
        },    
        sendemployee() {
            console.log(this.$refs['employeeDetail'])
            this.$refs['employeeDetail'].validate((valid) => {
                if (valid) { 
                    this.spinShow = true                  
                        new Promise((resolve, reject) => {
                            employeeCreate(this.employeeDetail).then(response => {
                                if (response.data.err == 0) {
                                    this.$Message.success(response.data.info);
                                    this.$router.push({'name':'employee_list'});  
                                } else {
                                    this.$Message.error(response.data.info);
                                    setTimeout(() => {
                                        this.loading = false;
                                        this.$nextTick(() => {
                                            this.loading = true;
                                        });
                                    }, 2000);
                                }
                                resolve();
                            }).catch(error => {
                                reject(error);
                            });
                        });                                     
                } else {
                    this.$Message.error("请完善必填信息");
                }
            })
        },
        cancel() {            
            this.$router.push({'name':'employee_list'});      
        }
    }
}
</script>

